<template>
  <div class="presetation_data">
    <h3>产品数据分析看板</h3>
    <el-row>
      <!-- <el-col :span="8">
        <div class="block">
          <span class="demonstration">时间</span>
          <el-date-picker
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <span class="demonstration">所属门店</span>
          <el-select v-model="storeName" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in storeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              unlink-panels
            ></el-option>
          </el-select>
        </div>
      </el-col> -->
      <companyStore  v-if="!this.$store.state.login.userInfo.storeId" :size="[6,6,6]" @cs="cs" ref="rest"/>
      <el-col :span="6" v-if="!this.$store.state.login.userInfo.storeId">
        <div class="button-row">
          <!-- <el-button size="medium" icon="el-icon-search" type="primary" @click="today()">今天</el-button>
          <el-button size="medium" icon="el-icon-search" type="primary" @click="yesterday()">昨天</el-button>
          <el-button size="medium" icon="el-icon-search" type="primary" @click="sevenday()">近七天</el-button> -->
          <el-button size="medium" icon="el-icon-search" type="success" :loading="loading1" @click="query">查询</el-button>
          <el-button size="medium" type="primary" icon="el-icon-refresh" :loading="loading2" @click="reset">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="title">
      <p>用户数据展示</p>
    </div>
    <el-row :gutter="10" v-loading="loading">
      <el-col :span="6" v-for="(item,index) in dataView" :key="index" >
        <div class="item" style="background-color: #4DA0FF;">
          <div class="top">
            <p>{{item.countTitle}}</p>
            <span style="background:#FFF">今日</span>
          </div>
          <div class="center1">
            <p style="font-size:20px;">{{item.count}}</p>
          </div>

          <div class="bottom1" v-if="item.amountTitle">
            <p>{{item.amountTitle}}</p>
            <p v-if="item.money">{{item.amount}}</p>
            <p v-if="!item.money">{{item.amount | money}}</p>
          </div>
              <div class="bottom1" v-if="item.money">
            <p>{{item.moneyTitle}}</p>
          <p>{{item.money | money}}</p>
          </div>


        </div>
      </el-col>
      <!-- <el-col :span="5">
        <div class="item">
          <div class="top">
            <p>新用户</p>
            <span style="background:#1F9FFF">今日</span>
          </div>
          <p>计算于 : {{new Date()| fmtdate}}</p>
          <h4>{{dataView[1]}}</h4>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="item">
          <div class="top">
            <p>老用户</p>
            <span style="background:#1F9FFF">今日</span>
          </div>
          <p>计算于 : {{new Date()| fmtdate}}</p>
          <h4>{{dataView[2]}}</h4>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="item">
          <div class="top">
            <p>储值用户</p>
            <span style="background:#1F9FFF">今日</span>
          </div>
          <p>计算于 : {{new Date()| fmtdate}}</p>
          <h4>{{dataView[3]}}</h4>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="item">
          <div class="top">
            <p>门店总用户</p>
            <span style="background:#1F9FFF">今日</span>
          </div>
          <p>计算于 : {{new Date()| fmtdate}}</p>
          <h4>{{dataView[4]}}</h4>
        </div>
      </el-col> -->
    </el-row>
    <!-- <div class="title">
      <p>交易数据展示</p>
    </div> -->
    <!-- <el-row :gutter="10">
      <el-col :span="5">
        <div class="item">
          <div class="top">
            <p>总交易额</p>
            <span style="background:#1F9FFF">今日</span>
          </div>
          <p>计算于 : {{new Date()| fmtdate}}</p>
          <h4>{{dataView[5] | money}}</h4>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="item">
          <div class="top">
            <p>柴油销售额</p>
            <span style="background:#1F9FFF">今日</span>
          </div>
          <p>计算于 : {{new Date()| fmtdate}}</p>
          <h4>{{dataView[6] | money}}</h4>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="item">
          <div class="top">
            <p>汽油销售额</p>
            <span style="background:#1F9FFF">今日</span>
          </div>
          <p>计算于 : {{new Date()| fmtdate}}</p>
          <h4>{{dataView[7] | money}}</h4>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="item">
          <div class="top">
            <p>一键加油</p>
            <span style="background:#1F9FFF">今日</span>
          </div>
          <p>计算于 : {{new Date()| fmtdate}}</p>
          <h4>{{dataView[8] | money}}</h4>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="item">
          <div class="top">
            <p>pos收银</p>
            <span style="background:#1F9FFF">今日</span>
          </div>
          <p>计算于 : {{new Date()| fmtdate}}</p>
          <h4>{{dataView[9] | money}}</h4>
        </div>
      </el-col>
    </el-row> -->
    <!-- <el-row :gutter="10">
      <el-col :span="12">
        <ech1 :lineData="lineData"/>
      </el-col>
      <el-col :span="12">
        <ech2 :pieData="pieData"/>
      </el-col>
    </el-row> -->
  </div>
</template>
<script>
import ech1 from "./echarts/ech_1";
import ech2 from "./echarts/ech_2";
import companyStore from "@/common/group_a_store.vue"
import {
  homeAnalysisData,
  homeLineData,
  homePieData,
  getStoreList
} from "@/config/interface";
import getDate from "@/utils/getDate";
export default {
  components: {
    ech1,
    ech2,
    companyStore
  },
  props: {},
  data() {
    return {
      date: [],
      storeList: [],
      storeName: "",
      dataView: [],
      lineData: {},
      pieData: {},
      startTimeStr: "",
      endTimeStr: "",
      loading1:false,
      loading2:false,
      storeId:"",
      loading:false,
      companyId:"",
      areaId:"",
      flag:this.$store.state.login.userInfo.storeId?false:true
    };
  },
  methods: {
    cs(e){
      console.log(e,"e")
      this.storeId = e[1]
      this.companyId=e[0]
      this.areaId=e[2]
    },
    today() {
      this.date = []
      this.startTimeStr = getDate.getToday().starttime;
      this.endTimeStr = getDate.getToday().endtime;
      this.getHomeAnalysisData(
        this.startTimeStr,
        this.endTimeStr,
        this.storeName,
        this.areaId
      );
    },
    yesterday() {
      this.date = []
      this.startTimeStr = getDate.getYesterday().starttime;
      this.endTimeStr = getDate.getYesterday().endtime;
      this.getHomeAnalysisData(
        this.startTimeStr,
        this.endTimeStr,
        this.storeName,
        this.areaId
      );
    },
    sevenday() {
      this.date = []
      this.startTimeStr = getDate.getCurrWeekDays().starttime;
      this.endTimeStr = getDate.getCurrWeekDays().endtime;
      this.getHomeAnalysisData(
        this.startTimeStr,
        this.endTimeStr,
        this.storeName
      );
    },
    query() {
      this.loading1=true
      this.startTimeStr = this.date[0];
      this.endTimeStr = this.date[1];
      this.getHomeAnalysisData(
        this.storeId,
        this.companyId,
        this.areaId

      );
    },
    reset() {
      this.loading2=true
      if(!this.$store.state.login.userInfo.storeId){
         this.$refs.rest.setgroup()
      }
      this.startTimeStr = "";
      this.endTimeStr = "";
      this.storeName = "";
       this.companyId="";
      this.storeId="",
      this.date = [];
      this.getHomeAnalysisData();
    },
    getHomeAnalysisData(storeId,companyId,areaId) {
      this.loading=true
      homeAnalysisData({  storeId,companyId,areaId }).then(res => {
        this.dataView = res.data.result;
        this.loading=false
        this.loading1=false
        this.loading2=false
      });
    },
    getHomeAnalysisData1() {
      this.loading=true
      homeAnalysisData().then(res => {
        this.dataView = res.data.result;
        this.loading=false
      });
    },
    homeLineData() {
      homeLineData().then(res => {
        this.lineData = res.data.result;
      });
    },
    homePieData() {
      homePieData().then(res => {
        this.pieData = res.data.result;
      });
    },
    getStoreList() {
      getStoreList().then(res => {
        this.storeList = res.data.result;
      });
    }
  },
  mounted() {
    this.date = new Date();
    if(this.$store.state.login.userInfo.storeId){
      this.getHomeAnalysisData1();
    }else{
      this.getHomeAnalysisData();
    }

    this.homeLineData();
    // this.homePieData();
    this.getStoreList();
  }
};
</script>
<style lang="scss" scoped>
.presetation_data {
  margin-top: 30px;
  h3 {
    margin: 0;
    color: #555;
    font-size: 26px;
    font-weight: 800;
    line-height: 50px;
    margin-bottom: 30px;
    &:after {
      content: "";
      display: block;
      width: 12px;
      height: 50px;
      background: #4DA0FF;
      border-radius:10px;
      float: left;
      margin-right: 25px;
    }
  }
  .item {
    background: #4DA0FF;
    height: 150px;
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 0 15px;
    .top {
      display: flex;
      justify-content: space-between;
      padding-top: 15px;
      align-items: center;
      margin-bottom: 10px;
      p {
        color: #fff;
        font-size: 18px;
         font-weight: 800;
      }
      span {
        color: #3C6DF2;
        font-size: 12px;
        padding: 1px 4px;
        float: right;
        background-color: #fff;
        border-radius: 4px;
        line-height: 16px;
      }
    }
    p {
      color: #fff;
      font-size: 10px;

    }
    h4 {
      font-size: 30px;
      color: #555;
      font-weight: 600;
      text-align: center;
      margin-top: 10px;
    }
  }
}
.button-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.title {
  margin: 30px 0;

  p {
    font-size: 18px;
    font-weight: bold;
    color: #555;
  }
}
.center1{
  text-align: center;
  height: 35px;
  p{
    font-size: 30px;
  }
}
.bottom1{
  display: flex;
  justify-content: space-between;
  margin-bottom:20px;
}
</style>
